import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    AsyncStorage,
    StatusBar,
    Platform
} from 'react-native';
import StorageUtil from './views/StorageUtil';
import Config from './common/Config'
import Utils from './common/Utils'
import {Toast,ModalIndicator} from 'teaset';
const STORAGE_KEY_TOKEN = '@AsyncStorageDemo:key_token';
const {height, width} = Dimensions.get('window');
export default class StartPage extends Component {
    componentDidMount() {
        this.timer = setTimeout(
            () =>{this.setState({
                isShow:true
            })},
            3000
        );
        this._loadInitialState().done();
    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
    }

    async _loadInitialState(){
        try{
            let value=await AsyncStorage.getItem(STORAGE_KEY_TOKEN);
            if(value!==null){
                this._appendMessage(value);
            }else{
                this._appendMessage('');
            }
        }catch(error){
            this._appendMessage('AsyncStorage错误'+error.message);
        }
    }
    _appendMessage=(message)=>{
        this.setState({
            token:this.state.token.concat(message)
        },()=>this.getInfo());
    };
    getInfo=()=>{
        let params={
            "token":this.state.token,
        };
        fetch(Config.baseApi+'/user/getInfo',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: Utils.getParamsString(params)
        })
            .then((response) => response.json())
            .then((responseJson) => {
                ModalIndicator.hide();
                if(responseJson.status===0){
                    if(this.state.token!==''){
                        this.setState({
                            area:responseJson.data.area,
                            token:responseJson.data.token
                        },()=>{
                            AsyncStorage.removeItem(STORAGE_KEY_TOKEN);
                            AsyncStorage.setItem(STORAGE_KEY_TOKEN,this.state.token);
                        });
                        this.setState({
                            isGoToPage:1
                        });
                    }else {
                        null
                    }
                }else{
                    this.setState({
                        isGoToPage:2
                    })
                }
            })
            .catch((error) => {
                ModalIndicator.hide();
                Toast.message(error);
            });
    };
    constructor(props) {
        super(props);
        this.state = {
            isGoToPage:0,
            area:'',
            token:'',
            isShow:false,
            isGoTo:false
        }
    };

    isGoTo=()=>{
        if(this.state.isGoToPage==0&&this.state.isShow===false){
            return <TouchableOpacity
                onPress={()=> this.setState({
                    isGoTo:true
                },()=>{
                    Actions.LoginPage();
                    this.timer && clearTimeout(this.timer);
                })}
                style={styles.ButView}>
                <Text style={styles.ButMsg}>跳过</Text>
            </TouchableOpacity>
        }else if(this.state.isGoToPage==1&&this.state.isShow===false){
            return (
                <TouchableOpacity
                    onPress={()=>this.setState({
                        isGoTo:true
                    },()=>{
                        Actions.EnquiriesTabPage({area:this.state.area});
                        this.timer && clearTimeout(this.timer)
                    })}
                    style={styles.ButView}>
                    <Text style={styles.ButMsg}>跳过</Text>
                </TouchableOpacity>
            )
        }else if(this.state.isGoToPage==2&&this.state.isShow===false){
            return (
                <TouchableOpacity
                    onPress={()=> this.setState({
                        isGoTo:true
                    },()=>{
                        Actions.LoginPage();
                        this.timer && clearTimeout(this.timer)
                    })}
                    style={styles.ButView}>
                    <Text style={styles.ButMsg}>跳过</Text>
                </TouchableOpacity>
            )
        }else if(this.state.isShow===true&&this.state.isGoToPage==1&&this.state.isGoTo==false){
            Actions.EnquiriesTabPage({area:this.state.area});
            this.timer && clearTimeout(this.timer)
        }else if(this.state.isShow===true&&this.state.isGoToPage!=1&&this.state.isGoTo==false){
            Actions.LoginPage();
            this.timer && clearTimeout(this.timer)
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    backgroundColor="#3090dd"
                    barStyle="light-content"
                />
                <Image
                    style={styles.imageView}
                    source={ImageUtil.StartPage}/>
                {this.isGoTo()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems:'center'
    },
    imageView:{
        resizeMode: Image.resizeMode.stretch,
        position: 'absolute',
        top:Platform.OS==='ios'?0:-20,bottom:0,left:0,right:0,
        height:height,width:width
    },
    ButView:{
        position: 'absolute',
        top:Platform.OS==='ios'?30:10,right:20,
        borderRadius:5,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'rgba(0,0,0,0.2)',
        height:29,
        width:64
    },
    ButMsg:{
        fontSize:17,
        color:'#ffffff',
        backgroundColor:'rgba(0,0,0,0)',
        margin:5,
    }
});
